import { Button, Checkbox, Form, Input } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useStore, observer } from '../../store'
import './style.less'

function Login () {
  const { userStore } = useStore()
  const navigate = useNavigate()

  const onFinish = async (values: any) => {
    await userStore.login(values, values.remember)
    navigate('/dashboard', { replace: true })
  }

  return (
    <div className="admin-login">
      <div className="admin-login-form">
        <h1>欢迎登录</h1>
        <Form
          name="basic"
          wrapperCol={{ span: 24 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            name="userAccount"
            rules={[{ required: true, message: '请输入您的账号！' }]}
          >
            <Input placeholder="账号" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入您的密码' }]}
          >
            <Input.Password placeholder="密码" />
          </Form.Item>

          <Form.Item name="remember" valuePropName="checked" wrapperCol={{ span: 24 }}>
            <Checkbox>30天免登录</Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ span: 24 }}>
            <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default observer(Login)
